<template>
  <div>
    <div style="margin:0px 0px 5px 0px;">
      <el-form :model="filterData" label-width="80px" size="mini">
        <el-row :gutter="20">
          <el-col style="width: 240px;">
            <el-form-item label="教材科目:">
              <el-select v-model="filterData.subject" clearable>
                <el-option label="语文" value="语文"></el-option>
                <el-option label="数学" value="数学"></el-option>
                <el-option label="英语" value="英语"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="width: 240px;">
            <el-form-item label="年级:">
              <el-select v-model="filterData.grade" clearable>
                <el-option label="一年级" value="一年级"></el-option>
                <el-option label="二年级" value="二年级"></el-option>
                <el-option label="三年级" value="三年级"></el-option>
                <el-option label="四年级" value="四年级"></el-option>
                <el-option label="五年级" value="五年级"></el-option>
                <el-option label="六年级" value="六年级"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="width: 240px;">
            <el-form-item label="出版社:">
              <el-input placeholder="出版社名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 240px;">
            <el-form-item label-width="0">
              <el-button icon="el-icon-search" type="primary" @click="handleSearch">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button type="primary" icon="el-icon-plus" @click="handleCreate">创建课本</el-button>
    </div>
    <div class="table-wraper">
      <el-table :data="tableData" border style="height: 100%;">
        <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
        <el-table-column label="封皮" align="center" width="120">
          <template v-slot="scope">
            <img :src="scope.row.cover" style="width: 100px;" />
          </template>
        </el-table-column>
        <el-table-column label="科目" align="center" prop="subject" width="85" sortable></el-table-column>
        <el-table-column label="课本名称" align="center" prop="name" sortable></el-table-column>
        <el-table-column label="版本" align="center" prop="edition" sortable></el-table-column>
        <el-table-column label="年级" align="center" prop="grade" sortable width="80"></el-table-column>
        <el-table-column label="册次" align="center" prop="ceci" sortable width="80"></el-table-column>
        <el-table-column label="出版社" align="center" prop="publisher" sortable show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center" width="140">
          <template v-slot="scope">
            <el-button-group>
              <el-button icon="el-icon-edit" circle title="编辑"></el-button>
              <el-button icon="el-icon-document-copy" circle title="编辑内容" @click="handleEditContent(scope.$index,scope.row)"></el-button>
              <el-button icon="el-icon-money" circle title="价格设置"></el-button>
              <el-button icon="el-icon-delete" type="danger" circle title="删除课本"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin: 5px 0px;text-align: right;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="curpage"
        :page-sizes="[10, 15, 30]" :page-size="10" layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <CreateUI v-if="createVisible" ref="createUI"></CreateUI>
  </div>
</template>

<script>
  import CreateUI from './create.vue';
  export default {
    components: {
      CreateUI
    },
    data() {
      return {
        filterData: {
          grade: '',
          subject: '',
          edition: ''
        },
        curpage: 1,
        pagesize:10,
        createVisible: false,
        tableData: [{
            "status": 0,
            "id": 4,
            "name": "英语 人教版(三年级起点) 四年级上册",
            "grade": "四年级",
            "ceci": "上册",
            "subject": "英语",
            "publisher": "人民教育出版社",
            "edition": "人教新起点",
            "cover": "https://aidianducdn.520diandu.com//storage/uploads/base_book/202010/20201013085359_73850.jpg",
          },
          {
            "status": 0,
            "id": 6,
            "name": "英语 人教版(三年级起点) 四年级上册",
            "grade": "四年级",
            "ceci": "上册",
            "subject": "英语",
            "publisher": "人民教育出版社",
            "edition": "人教新起点",
            "cover": "https://aidianducdn.520diandu.com//storage/uploads/base_book/202007/20200720135202_83796.jpg"
          }
        ]
      }
    },
    methods: {
      handleSearch(){

      },
      handleSizeChange(size) {
        this.pagesize=size;
      },
      handleCurrentChange(page) {
        this.curpage=page;
      },
      handleEditContent(index,data){
        this.$router.push("/admin/book/detail?="+data.id);
      },
      handleCreate() {
        this.createVisible = true;
        this.$nextTick(() => {
          this.$refs.createUI.dialogVisible = true;
        })
      }
    }
  }
</script>

<style scoped>
  .table-wraper {
    height: calc(100vh - 200px);
  }
</style>
